<template>
  <div class="info-container" v-loading="loading">
    <div style="position: absolute;right: 20px;top: -47px;">
      <el-button type="primary" size="defalut" @click="handleClipboardRequirement">快速创建需求</el-button>
    </div>
    <!-- 需求详情区域 -->
    <div class="info-box" v-if="requirementData" close-on-click-modal>
      <div class="info-title">
        <!-- 需求主状态 -->
        <p class="info-status" :style="{
          color:
            requirementData.itemRequirementIsEnter <= 3 &&
              requirementData.requirementBossName == ''
              ? enterStatus(requirementData.itemRequirementIsEnter).bgColor
              : fatherStatus(requirementData.requirementFatherStatus).bgColor,
        }">
          <el-tag style="font-size: 14px; color: #fff;"
            :color="fatherStatus(requirementData.requirementFatherStatus).bgColor">
            {{ requirementData.itemRequirementIsEnter <= 3 && requirementData.requirementBossName == "" ?
              enterStatus(requirementData.itemRequirementIsEnter).text :
              fatherStatus(requirementData.requirementFatherStatus).text }} </el-tag>

              <span v-if="requirementData.requirementFatherStatus > 7"
                :style="{ color: requirementData.requirementOnlineStatus == 2 ? '#67C23A' : requirementData.requirementOnlineStatus == 3 ? '#DF0101' : '#909399' }"
                style="font-size: 14px;">
                {{ requirementData.requirementOnlineStatus == 2 ? " - 上线成功" : requirementData.requirementOnlineStatus ==
                  3
                  ? " - 上线失败" : " - 未上线" }}
              </span>

        </p>
        <!-- 需求类别 -->
        <p>
          <el-icon :style="{ color: taskTypeContent(requirementData.taskType).color }" :size="14">
            <Flag />
          </el-icon>
          <span>{{ taskTypeContent(requirementData.taskType).text }}</span>
        </p>
        <!-- 需求标题 -->
        <p class="info-title-text" :content="requirementData.requirementName">
          {{ requirementData.requirementName }}
        </p>
        <!-- 是否需要测试参与 -->
        <p v-if="requirementData.isGetTest < 3" :style="{ color: isGetTestStatus(requirementData.isGetTest)?.color }"
          class="isJoin">
          {{ isGetTestStatus(requirementData.isGetTest)?.text }}
        </p>
      </div>

      <!-- 相关人员信息：样式二 -->
      <div class="info-user">
        <div class="w-[100%] flex flex-col flex-wrap">

          <div class="w-[100%] flex flex-row flex-nowrap justify-between mb-3 pl-2 pr-2">
            <div class="w-[33%] mr-5 flex flex-row justify-start">
              <div class="w-[50%]">
                <b class="w-120">创建人：</b>
                <span>{{ requirementData.requirementCreateName }}</span>
              </div>
              <div class="w-[50%]" v-if="requirementData.requirementAuditName">
                <b class="w-120">审核人：</b>
                <span>{{ requirementData.requirementAuditName }}</span>
              </div>
            </div>
            <div class="w-[33%] mr-5">
              <div v-if="requirementData.requirementBossName">
                <b class="w-120">技术负责人：</b>
                <span>{{ requirementData.requirementBossName }}</span>
              </div>
            </div>
            <div class="w-[33%] mr-5">
              <div v-if="requirementData.contactTestBossName">
                <b class="w-120">测试负责人：</b>
                <span>{{ requirementData.contactTestBossName }}</span>
              </div>
            </div>
          </div>

          <div class="w-[100%] flex flex-row flex-nowrap justify-between pl-2 pr-2 mb-3">
            <div class="w-[33%] mr-5">
              <div>
                <b class="w-120">研发人员：</b>
                <span>{{ requirementData.requirementRelevances == '' ? "未分配" :
                  handleStringNames(requirementData.requirementRelevances) }}</span>
              </div>
            </div>
            <div class="w-[33%] mr-5">
              <div>
                <b class="w-120">运维人员：</b>
                <span>{{ requirementData.requirementLinuxs == '' ? '未分配' :
                  handleStringNames(requirementData.requirementLinuxs) }}</span>
              </div>
            </div>
            <div class="w-[33%] mr-5">
              <div>
                <b class="w-120">测试人员：</b>
                <span>{{ requirementData.contactTestNames == '' ? '未分配' :
                  handleStringNames(requirementData.contactTestNames) }}</span>
              </div>
            </div>
          </div>

          <div class="w-[100%] flex flex-row flex-nowrap justify-between pl-2 pr-2">
            <div class="w-[33%] mr-5">
              <b>创建时间：</b>
              <span>{{ timeToData(requirementData.createAt) }}</span>
            </div>
            <div class="w-[33%] mr-5">
              <b>预计结束时间：</b>
              <span>{{ timeToData(requirementData.onlineTime) }}</span>
            </div>
            <div class="w-[33%] mr-5">
              <div v-if="requirementData.endTime">
                <b>结束时间：</b>
                <span>{{ timeToData(requirementData.endTime) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 需求简述 -->
      <div class="info-content-box-top">
        <p class="info-content-box-title">
          <el-icon style="position: absolute;left: 0; top: 7px;font-size: 15px;">
            <Document />
          </el-icon> 需求简述：
        </p>
        <el-button
          v-if="isUserAuthId == '888' || isUserAuthId == '999' || userName == requirementData.requirementBossName || userName == requirementData.requirementCreateName"
          type="primary" size="small" @click="handleOpenEditorRequriementMsg">修改</el-button>
      </div>

      <div class="info-content-box">
        <el-card class="el-card-content">
          <!--          <div class="info-content" ref="requirementImgRef" v-html="requirementData.requirementContent"-->
          <!--            @click="fullScreenImg($event)"></div>-->
          <div class="info-content" ref="requirementImgRef" v-html="requirementData.requirementContent"
            @click="showImg($event)"></div>
        </el-card>
      </div>

      <!-- 需求草稿文档下载 -->
      <div class="info-file-box" v-if="draftFiles.length !== 0">
        <p class="info-content-title">
          <el-icon style="position: absolute;left: -18px; top: 3px;font-size: 15px;">
            <Link />
          </el-icon>
          <span class="info-user-title">需求草稿</span>
          <!-- <el-button style="margin-top: 3px;font-size: 10px;" size="small" type="primary">修改</el-button> -->
        </p>
        <ul class="info-file-ul">
          <li class="info-file-item" v-for="(item, index) in draftFiles" :key="index">
            <div>
              <el-icon :size="12">
                <Document />
              </el-icon>
              <span>{{ item.fileName ? item.fileName : item.name }}</span>
              <el-icon class="info-file-icon" @click="handlePreviewDocument(item.url)">
                <View />
              </el-icon>
              <el-icon class="info-file-icon" @click="handleDownloadFile(item, baseUrl)">
                <Download />
              </el-icon>
            </div>
            <p>{{ item.name }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.timestamp }}</p>
          </li>
        </ul>
      </div>

      <!-- 需求概要设计文档下载/修改 -->
      <div class="info-file-box">
        <p class="info-content-title">
          <el-icon style="position: absolute;left: -18px; top: 3px;font-size: 15px;">
            <Link />
          </el-icon>
          <span class="info-user-title">概要设计：</span>
          <el-button v-if="userName == requirementData.requirementBossName" style="margin-top: 3px;font-size: 10px;"
            size="small" type="primary" @click="handleOpenEditFile(2, summaryFiles, null)">修改</el-button>
        </p>
        <ul class="info-file-ul">
          <li class="info-file-item" v-for="(item, index) in summaryFiles" :key="index">
            <div>
              <el-icon :size="12">
                <Document />
              </el-icon>
              <span>{{ item.fileName ? item.fileName : item.name }}</span>
              <el-icon class="info-file-icon" @click="handlePreviewDocument(item.url)">
                <View />
              </el-icon>
              <el-icon class="info-file-icon" @click="handleDownloadFile(item, baseUrl)">
                <Download />
              </el-icon>
            </div>
            <p>{{ item.name }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.timestamp }}</p>
            <!-- <el-button type="primary" @click="handleSelectFile(item.url)">预览</el-button> -->
            <!-- <a href="#" @click.prevent="handleSelectFile(item.url)">预览</a> -->
          </li>
        </ul>
      </div>

      <!-- 新增任务按钮 - 始终显示 -->
      <div class="comment-title" style="margin-bottom: 10px; padding: 10px; background-color: #f5f7fa; border-radius: 4px;"
        v-if="requirementData !== undefined && (requirementData.requirementFatherStatus >= 1 && requirementData.requirementFatherStatus <= 6)">
        <span class="info-user-title">任务管理：</span>
        <el-button type="primary" size="small" plain @click="handleOpenProjectCaseDialog">查看项目用例</el-button>
        <el-button type="primary" size="small" plain
          v-if="requirementData.taskType == 1 || requirementData.taskType == 3"
          :disabled="((userName !== requirementData.contactTestBossName && userName !== requirementData.requirementBossName) || (requirementData.requirementFatherStatus > 7))"
          @click="handleOpenAddAvgDialog()">新增任务</el-button>
        <el-button type="primary" size="small" plain
          v-if="requirementData.taskType == 2 || requirementData.taskType == 4"
          :disabled="((userName !== requirementData.contactTestBossName && userName !== requirementData.requirementBossName && requirementData.requirementFatherStatus !== 1 && requirementData.requirementFatherStatus !== 2 && requirementData.requirementFatherStatus !== 6))"
          @click="handleOpenAddAvgDialog()">新增任务</el-button>
      </div>

      <!-- 已分配任务 -->
      <el-card class="el-card-childs card-comment-box" style="margin-bottom: 10px;"
        v-if="requirementData !== undefined && requirementData.requirementFatherStatus > 1">

        <!-- 任务列表 -->
        <div class="comment-title">
          <span class="info-user-title">已分配任务：</span>
        </div>
        <el-table :data="tableData" style="width: 100%" align="center" stripe border :default-expand-all="true"
          row-key="ID">
          <el-table-column type="expand" width="40px">
            <template #default="props">
              <div style="padding: 20px; background-color: rgb(243.9, 244.2, 244.8)">
                <div class="table-inline">
                  <el-button v-if="props.row.itemRequirementWorldDetailed !== ''"
                    style="margin-top: 3px;font-size: 10px;margin-right: 5px;" size="small" type="primary"
                    @click="handleOpenEditFile(3, handleFilesNames(props.row.itemRequirementWorldDetailed), props.row.ID)">修改</el-button>
                  <!-- 详细设计 -->
                  <div v-if="props.row.itemRequirementWorldDetailed !== ''">
                    <p class="info-content-title" style="float: left;padding-right: 0;">
                      <el-icon style="position: absolute;left: -18px; top: 3px;font-size: 15px;">
                        <Link />
                      </el-icon>
                      <span style="width: 70px;display: inline-block;">详细设计：</span>
                    </p>
                    <ul class="info-file-ul" style="float: left;padding-right: 20px;cursor: pointer;">
                      <li class="info-file-item"
                        v-for="(path, index) in handleFileNameList(props.row.itemRequirementWorldDetailed)"
                        :key="index">
                        <div>
                          <el-icon :size="12">
                            <Document />
                          </el-icon>
                          <span>{{ handleFileName(path).fileName ? handleFileName(path).fileName :
                            handleFileName(path).name }}</span>
                          <el-icon class="info-file-icon" @click="handlePreviewDocument(path)">
                            <View />
                          </el-icon>
                          <el-icon class="info-file-icon" @click="handleDownloadFile(handleFileName(path), baseUrl)">
                            <Download />
                          </el-icon>
                        </div>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;{{ handleFileName(path).name }}
                          &nbsp;&nbsp;&nbsp;&nbsp;{{ handleFileName(path).timestamp }}
                        </p>
                      </li>
                    </ul>
                  </div>
                  <!-- 测试人员 -->
                  <p v-if="props.row.isTs == 1 && props.row.testUserNames !== ''">
                    <span>测试人员：{{ handleStringNames(props.row.testUserNames) }}</span>
                  </p>
                </div>
                <el-table v-if="props.row.itemRequirementBranchTests.length !== 0"
                  :data="props.row.itemRequirementBranchTests">
                  <el-table-column label="测试人员" prop="testName" align="center" width="160px" />
                  <el-table-column label="测试状态" align="center" min-width="240px">
                    <template #default="{ row }">
                      <el-button type="primary" size="small" plain :disabled="row.testStatus !== 2"
                        @click="hanldeUpdateTestStatus(row.ID)">{{ testStatus(row.testStatus).text }}</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="120px">
                    <template #default="{ row }">
                      <el-button type="danger" size="small" plain :disabled="userName !== row.submitTestName"
                        @click="handleDeletSubmitPersion(row)" :icon="Delete"></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="归属人" prop="userName" width="90px" align="center" />
          <el-table-column label="角色" prop="isTs" width="60px" align="center">
            <template #="{ row }">
              <span>{{ isTsContent(row.isTs).content }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务内容" prop="processJob" show-overflow-tooltip min-width="110px" align="left" />
          <el-table-column label="预计完成时间" prop="guessTime" align="center" width="120px">
            <template #="{ row }">
              <span>{{ timeToData(row.guessTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="耗时评估(h)" prop="guessProcess" align="center" width="100px" />
          <el-table-column label="难度评分" prop="processJobNum" align="center" width="90px" />
          <el-table-column label="任务进度" prop="requirementChildStatus" align="center" width="100px"
            v-if="requirementData.taskType == 1">
            <template #="{ row }">
              <span style="color: red">{{
                row.isTs == 3 && row.requirementChildStatus < 5 ? "等待提测" : row.requirementChildStatus == 5 ?
                  testStatus(row.submitTestNext).text : fatherStatus(row.requirementChildStatus).text }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务进度" prop="requirementChildStatus" align="center" width="100px"
            v-if="requirementData.taskType !== 1">
            <template #="{ row }">
              <span style="color: red">{{
                row.isTs == 3 && row.requirementChildStatus < 5 ? "待完成" : row.requirementChildStatus == 5 ?
                  testStatus(row.submitTestNext).text : fatherStatus(row.requirementChildStatus).text }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否超时" align="center" width="100px" prop="isOutTime">
            <template #="{ row }">
              <el-button size="small" :disabled="(row.isOutTime == '否' || row.isOutTime == '')"
                :type="((row.isOutTime == '否' || row.isOutTime == '') ? 'success' : row.isOutTimeMsg == '' ? 'danger' : 'primary')"
                @click="handleOpenChildOutTime(row)">
                {{ (row.isOutTime == '否' || row.isOutTime == '') ? "未超时" : row.isOutTimeMsg == '' ? "填写原因" : "查看原因" }}
              </el-button>
              <!-- <el-text v-if="(row.requirementChildStatus < 6)" style="color: #ccc;">—</el-text> -->
            </template>
          </el-table-column>
          <el-table-column label="提测版本/测试用例" prop="processJobNum" align="center" width="90px">
            <template #="{ row }">
              <!-- <el-text v-if="row.isTs == 1 && row.itemRequirementMeetingEasy !== '' && row.userName == userName"
                style="color: #2d8cf0;cursor: pointer;font-weight: 500;"
                @click="handleAddPullBranch(row)">新增提测</el-text>&nbsp;&nbsp; -->

              <el-text v-if="row.isTs == 1 && row.itemRequirementMeetingEasy !== ''"
                style="color: #2d8cf0;cursor: pointer;font-weight: 500;"
                @click="handleViewPullBranch(row)">提测记录</el-text>
              <el-text v-if="row.isTs == 1 && row.itemRequirementMeetingEasy == ''" style="color: #ccc;">—</el-text>
              <el-text v-if="row.isTs == 2" style="color: #ccc;">—</el-text>
              <!-- <el-text v-if="(row.taskType == 2 || row.taskType == 4) && row.isTs == 3" style="color: #ccc;">—</el-text> -->
              <!-- 只有测试用户才能上传用例，其余用户为查看用例 -->
              <!-- <el-text v-if="row.isTs == 2" style="color: #2d8cf0;cursor: pointer;font-weight: 500;" @click="handleOpenCaseDialog(row)">{{ (row.isUploadCase == 1 && (isUserAuthId == '111' || isUserAuthId == '666')) ? '上传用例' : '查看用例' }}</el-text> -->

              <el-text v-if="row.isTs == 3" style="color: #2d8cf0;cursor: pointer;font-weight: 500;"
                @click="handleEditorCaseDialog(row)">上传用例</el-text>


              <el-text v-if="row.isTs == 3" style="color: #2d8cf0;cursor: pointer;font-weight: 500;"
                @click="handleOpenCaseDialog(row)">查看用例</el-text>
            </template>
          </el-table-column>

          <!-- 上线任务 -->
          <el-table-column label="操作" align="right" width="200px"
            v-if="requirementData.requirementFatherStatus < 7 && requirementData.taskType == 1">
            <template #="{ row }">
              <el-button v-if="row.isTs == 1 && row.itemRequirementMeetingEasy !== ''" type="primary" size="small"
                @click="handleAddPullBranch(row)">新增</el-button>

              <el-button type="primary" size="small" v-if="row.isTs == 2"
                :disabled="!(userName == row.avgUserName || (isUserAuthId == '888' || isUserAuthId == '999'))"
                @click="handleChangeChildUser(row)">修改</el-button>

              <el-button type="primary" size="small" @click="handleChangeChildUser(row)" v-if="row.isTs !== 2"
                :disabled="((!(userName == row.avgUserName || (isUserAuthId == '888' || isUserAuthId == '999'))) || row.requirementChildStatus > 5)">修改</el-button>
              <el-button type="danger" size="small" @click="handleDelChildUser(row)"
                :disabled="((!(userName == row.avgUserName || (isUserAuthId == '888' || isUserAuthId == '999'))) || row.requirementChildStatus > 4)">删除</el-button>
            </template>
          </el-table-column>

          <!-- 非上线任务 -->
          <el-table-column label="操作" align="center" width="140px"
            v-if="(isUserAuthId == '111' || isUserAuthId == '555' || isUserAuthId == '888' || isUserAuthId == '999') && requirementData.taskType !== 1">
            <template #="{ row }">
              <el-button type="primary" size="small" @click="handleChangeChildUser(row)"
                :disabled="((!(userName == row.avgUserName || (isUserAuthId == '888' || isUserAuthId == '999'))) || row.requirementChildStatus > 5)">修改</el-button>
              <el-button type="danger" size="small" @click="handleDelChildUser(row)"
                :disabled="((!(userName == row.avgUserName || (isUserAuthId == '888' || isUserAuthId == '999'))) || row.requirementChildStatus > 4)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>


      <!-- 已分配任务：样式二 -->
      <!-- <el-card class="el-card-childs card-comment-box" style="margin-bottom: 10px;">
        <el-tabs v-model="activeTest" calss="demo-tabs" @tab-click="handleTabsClick">
          <el-tab-pane label="研发任务" name="研发任务">
            <div class="card-comment-test-out">
              <b>研发任务列表</b>
              <div>
                <el-button type="primary" size="small" @click="handleOpenProjectCaseDialog()">查看项目用例</el-button>
                <el-button type="primary" size="small" @click="handleOpenAddAvgDialog()"  :disabled="(userName !== requirementData.contactTestBossName && userName !== requirementData.requirementBossName) || (requirementData.requirementFatherStatus > 7)">新增任务</el-button>
              </div>
            </div>
            <div >
             <ul class="flex flex-row justify-start">
              <li class="w-1/4 flex flex-col bg-[#F9FAFB] mr-2 p-2 rounded-md" v-for="(item, index) in tableDevsData" :key="index">
                任务内容及操作
                <div class="flex flex row justify-between">
                  <div><b class="text-[14px]">{{ item.processJob }}</b></div>
                  <div class="w-30 flex flex-row flex-nowrap justify-end items-center"  v-if="(isUserAuthId == '111' || isUserAuthId == '555') && requirementData.requirementFatherStatus < 7">
                    <button class="pr-1 w-6 h-6 text-[#409EFF] ml-1/2 cursor-pointer" v-if="item.isTs == 1 && item.itemRequirementMeetingEasy !== '' && item.userName == userName" @click="handleAddPullBranch(item)"><el-icon size="16"><Plus /></el-icon></button>
                    <button class="pr-1 w-6 h-6 text-[#409EFF] ml-1/2 cursor-pointer" v-if="!(userName !== item.avgUserName || item.requirementChildStatus > 5)" @click="handleChangeChildUser(item)"><el-icon size="16"><Edit /></el-icon></button>
                    <button class="pr-1 w-6 h-6 text-[#F56C6C] ml-1/2 cursor-pointer" v-if="!(userName !== item.avgUserName || item.requirementChildStatus > 4)" @click="handleDelChildUser(item)"><el-icon size="16"><Delete /></el-icon></button>
                  </div>
                </div>

                归属人
                <div class="flex flex-row flex-nowrap items-center text-[12px] mb-1">
                  <el-icon><User /></el-icon>
                  <p class="ml-1">
                    <span>归属人：</span>
                    <span>{{ item.userName }}</span>
                    <el-tag class="ml-1" type="primary" size="small">{{ isTsContent(item.isTs).content }}</el-tag>
                  </p>
                </div>

                耗时评时、难度评分
                <div class="flex flex-row justify-between text-[12px] mb-1">
                  <div class="flex flex-row flex-nowrap items-center">
                    <el-icon size="10"><Clock /></el-icon>
                    <p class="ml-1">
                      <span>耗时评估(h)：</span>
                      <span>{{ item.guessProcess }}</span>
                    </p>
                  </div>
                  <div class="flex flex-row flex-nowrap items-center">
                    <el-icon size="10"><PieChart /></el-icon>
                    <p class="ml-1">
                      <span>难度评分：</span>
                      <span>{{ item.processJobNum }}</span>
                    </p>
                  </div>
                </div>

                任务进度、是否超时
                <div class="flex flex-start text-[12px] mb-1">
                  <el-tag class="mr-1" type="danger" size="small">
                    <span style="color: red">{{ item.isTs == 3 && item.requirementChildStatus < 5 ? "等待提测" : item.requirementChildStatus == 5 ? testStatus(item.submitTestNext).text : fatherStatus(item.requirementChildStatus).text }}</span>
                  </el-tag>
                  <el-tag class="mr-1" size="small" :type="((item.isOutTime == '否' || item.isOutTime == '') ? 'success' : item.isOutTimeMsg == '' ? 'danger' : 'primary')">
                      {{ (item.isOutTime == '否' || item.isOutTime == '') ? "未超时" : "已超时" }}
                  </el-tag>
                </div>

                查看提测记录、上传/查看任务用例
                <div class="flex flex-start text-[12px] mb-1">
                  <el-button class="mr-1 text-[12px]" type="primary" size="small" v-if="item.isTs == 1 && item.itemRequirementMeetingEasy !== ''" @click="handleViewPullBranch(item)">查看提测记录</el-button>
                  <el-button class="mr-1 text-[12px]" type="primary" size="small" v-if="item.isTs == 3 && (item.taskType == 1 || item.taskType ==3)" @click="handleEditorCaseDialog(item)">上传任务用例</el-button>
                  <el-button class="mr-1 text-[12px]" type="primary" size="small" v-if="item.isTs == 3 && (item.taskType == 1 || item.taskType ==3)" @click="handleOpenCaseDialog(item)">查看任务用例</el-button>
                </div>

                预计完成时间
                <div class="flex flex-row text-[12px] mb-1 items-center">
                  <el-icon size="10"><Calendar /></el-icon>
                  <p class="ml-1"><span>预计完成时间：</span><span>{{ item.guessTime }}</span></p>
                </div>
                详细设计文件
                <div class="flex flex-row pb-2" style="border-bottom: 1px solid #ccc">
                  <el-icon size="16px" color="#409EFF" v-if="userName == requirementData.requirementBossName && item.itemRequirementWorldDetailed !== ''" @click="handleOpenEditFile(3, handleFilesNames(item.itemRequirementWorldDetailed), item.ID)"><EditPen /></el-icon>
                  详细设计
                  <div class="flex flex-col ml-1 text-[12px]" v-if="item.itemRequirementWorldDetailed !== ''">
                    <el-icon style="position: absolute;left: -18px; top: 3px;font-size: 15px;">
                      <Link />
                    </el-icon>
                    详细设计：
                    <span style="margin-right: 10px;"
                      v-for="(path, index) in handleFileNameList(item.itemRequirementWorldDetailed)" :key="index">
                      <span style="color: #2d8cf0; cursor: pointer;font-weight: 500;"
                        @click="handleDownloadFile(handleFileName(path), baseUrl)">
                        <el-icon :size="12">
                          <Document />
                        </el-icon>
                        {{ handleFileName(path).fileName }}
                      </span>
                    </span>
                  </div>
                </div>

                提测人员列表
                <div>

                </div>

              </li>
             </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="运维任务" name="运维任务">
            <div class="card-comment-test-out">
              <b>运维任务列表</b>
              <div>
                <el-button type="primary" size="small" @click="handleOpenProjectCaseDialog()">查看项目用例</el-button>
                <el-button type="primary" size="small" @click="handleOpenAddAvgDialog()"  :disabled="(userName !== requirementData.contactTestBossName && userName !== requirementData.requirementBossName) || (requirementData.requirementFatherStatus > 7)">新增任务</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="测试任务" name="测试任务">
            <div class="card-comment-test-out">
              <b>测试任务列表</b>
              <div>
                <el-button type="primary" size="small" @click="handleOpenProjectCaseDialog()">查看项目用例</el-button>
                <el-button type="primary" size="small" @click="handleOpenAddAvgDialog()"  :disabled="(userName !== requirementData.contactTestBossName && userName !== requirementData.requirementBossName) || (requirementData.requirementFatherStatus > 7)">新增任务</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card> -->

      <!-- 历史留言 -->
      <el-card class="card-comment-box" v-loading="loadingMsg">
        <el-segmented style="margin-bottom: 10px;" :options="msgOptions" v-model="defaultMsg"
          @change="handleChangeMsg(defaultMsg)"></el-segmented>

        <!-- 历史留言 -->
        <div class="card-timeline-msg" v-if="defaultMsg == '历史留言'">
          <p style="color: #ccc;" v-if="commentsData.length == 0">暂无留言</p>
          <el-timeline>
            <el-timeline-item v-if="commentsData.length > 0" v-for="(item, index) in commentsData" :key="index"
              :color="index == 0 ? '#409EFF' : ''" :timestamp="`${tableTimeDateMsg2(item.createAt)}`">
              <div v-html="`${item.saidUserName}&nbsp;&nbsp;${item.saidContent}`"></div>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 变更历史 -->
        <div class="card-timeline-msg" v-if="defaultMsg == '变更历史'">
          <p style="color: #ccc;" v-if="commentsHistorysData.length == 0">暂无记录</p>
          <el-timeline>
            <el-timeline-item v-if="commentsHistorysData.length > 0" v-for="(item, index) in commentsHistorysData"
              :key="index" :color="index == 0 ? '#409EFF' : ''" :timestamp="`${tableTimeDateMsg2(item.createAt)}`">
              <div v-html="`${item.operationUserName}&nbsp;&nbsp;${item.operationHistory}`"></div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </div>

    <!-- 评论输入框区域 -->
    <div class="comment-box" v-if="props.isComment">
      <el-input class="comment-input" type="text" placeholder="请输入留言......" v-model="addSaidContents.saidContent"
        clearable></el-input>
      <el-button class="comment-btn" type="primary" @click="handleAddSaidContents">留言</el-button>
    </div>
  </div>

  <!-- 修改需求详情 -->
  <el-dialog v-if="dialogEditorRequirementMsgVisible" title="修改需求详情" :close-on-click-modal="false" :draggable="true"
    v-model="dialogEditorRequirementMsgVisible" @close="handleCloseEditorMsg" @closed="handleCloseEditorMsg">
    <EditorMsgVue :modelValue="requirementContent" @update:modelValue="updateMsg"></EditorMsgVue>
    <div class="footer-box" style="margin-top: 20px;">
      <el-button type="defalut" @click="handleCloseEditorMsg">取消</el-button>
      <el-button type="primary" @click="handleUpdateEditorMsg">确定</el-button>
    </div>
  </el-dialog>

  <!-- 查看项目用例 -->
  <el-dialog v-if="dialogProjectCaseVisible" width="1400px" style="min-height: 600px;margin-top: 8vh"
    v-model="dialogProjectCaseVisible" title="查看项目用例" :close-on-click-modal="false"
    @close="dialogProjectCaseVisible = false" :lock-scroll="true">
    <ItemProjectCasesVue :itemItemId="requirementData.itemItemId" :childId="isChildId" :isAddTestCase="2">
    </ItemProjectCasesVue>
  </el-dialog>

  <!-- 添加提测人员弹窗 -->
  <el-dialog v-model="dialogAddSubmitTestVisible" title="添加提测人员">
    <div class="add-test-box">
      <p>请选择新增提测人员：</p>
      <el-select v-model="addTestForm.ts" multiple placeholder="测试人员" style="width: 360px">
        <el-option v-for="item in testOptions" :key="item.uuid" :label="item.userName" :value="item.uuid"
          :disabled="item.disabled" />
      </el-select>
    </div>
    <div class="add-test-box-2">
      <p class="add-test-name">产品分支：</p>
      <el-input type="text" placeholder="请输入产品分支" size="defalut" v-model="addTestForm.pullBranch1"></el-input>
    </div>
    <div class="add-test-box-2">
      <p class="add-test-name">项目分支：</p>
      <el-input type="text" placeholder="请输入项目分支" size="defalut" v-model="addTestForm.pullBranch2"></el-input>
    </div>
    <div class="add-test-box-2 add-test-box-3">
      <p class="add-test-name">提测说明：</p>
      <el-input type="textarea" placeholder="请输入提测说明..." size="defalut" :autosize="{ minRows: 4, maxRows: 8 }"
        v-model="addTestForm.submitTest"></el-input>
    </div>
    <div class="footer-box">
      <el-button type="default" @click="handleColseAddTest">取消</el-button>
      <el-button type="primary" @click="handleAddSubmitTest">确定</el-button>
    </div>
  </el-dialog>

  <!-- 提测记录弹窗 -->
  <el-dialog v-model="dialogPullBranchVisible" title="提测记录">
    <el-timeline v-loading="loadingPullBranch">
      <el-timeline-item v-for="(item, index) in pullBranchList" :key="index" :color="index == 0 ? '#409EFF' : ''"
        :timestamp="`${tableTimeDateMsg2(item.createdAt)}`">
        <p style="padding: 5px 0; color: #409EFF">提测人：{{ item.submitNames ? item.submitNames :
          '无' }}&nbsp;&nbsp;&nbsp;&nbsp;测试：{{ item.submitTestNames ? item.submitTestNames : '无' }}</p>
        <p><span style="font-weight: bold;">产品分支：</span>{{ item.pullBranch1 }}</p>
        <p><span style="font-weight: bold;">项目分支：</span>{{ item.pullBranch2 }}</p>
        <p><span style="font-weight: bold;">提测说明：</span>{{ item.submitTest }}</p>
      </el-timeline-item>
    </el-timeline>
  </el-dialog>

  <!-- 上传测试用例 -->
  <el-dialog width="1400px" style="min-height: 600px;margin-top: 8vh" v-model="dialogEditorTestCaseVisible"
    title="添加测试用例" :close-on-click-modal="false" :lock-scroll="true">
    <TestRequirementCaseVue :visible="dialogTestCaseVisible" :testCaseSearch="testCaseSearch" :isOperation="1"
      :isAllCase="false" @add-success="handleAddSuccess"></TestRequirementCaseVue>
  </el-dialog>

  <!-- 查看测试用例 -->
  <el-dialog v-if="dialogTestCaseVisible" width="1400px" style="min-height: 600px;margin-top: 8vh"
    v-model="dialogTestCaseVisible" title="查看测试用例" :close-on-click-modal="false" @close="dialogTestCaseVisible = false" :lock-scroll="true">
    <TestRequirementCaseVue :visible="dialogTestCaseVisible" :testCaseSearch="testCaseSearch" :isOperation="2"
      :isAllCase="false">
    </TestRequirementCaseVue>
  </el-dialog>

  <!-- 修改任务弹窗 -->
  <el-dialog :close-on-click-modal="false" v-model="dialogUpdateChildMsgVisible" title="修改任务"
    @close="handleCloseUpdataChildMsgDialog" @closed="handleCloseUpdataChildMsgDialog">
    <el-form class="dialog-form-box" :model="updateChildMsgForm" ref="updateChildMsgRef" :rules="updateChildMsgRules">
      <!-- 研发人员 -->
      <!-- <el-form-item label="归属人：">{{ isUpdateChildMsg?.userName }}</el-form-item> -->
      <el-form-item label="归属人：" prop="userUUID">
        <el-select v-model="updateChildMsgForm.userUUID" placeholder="Select" size="default" style="width: 240px"
          disabled>
          <el-option v-for="item in allRoleOptions" :key="item.uuid" :label="item.nickName" :value="item.uuid" />
        </el-select>
      </el-form-item>

      <!-- 预计完成时间 -->
      <el-form-item prop="guessTime" label="预计完成时间：">
        <el-date-picker style="width: 140px" v-model="updateChildMsgForm.guessTime" type="date" placeholder="预计完成时间"
          :disabledDate="disabledDate" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
      </el-form-item>
      <!-- 描述工作内容 -->
      <el-form-item prop="processJob" label="任务内容：">
        <el-input style="width: 420px" placeholder="简述工作内容..." clearable
          v-model="updateChildMsgForm.processJob"></el-input>
      </el-form-item>
      <!-- 评估耗时 -->
      <el-form-item prop="guessProcess" label="耗时评估：">
        <el-input-number style="width: 80px" v-model="updateChildMsgForm.guessProcess" :min="0"
          controls-position="right" :precision="0" />
        &nbsp;&nbsp; 小时
      </el-form-item>
      <!-- 需求评分 -->
      <el-form-item prop="processJobNum" label="难度评分：">
        <el-input-number style="width: 80px" v-model="updateChildMsgForm.processJobNum" :min="0" :precision="0"
          controls-position="right" />
      </el-form-item>
    </el-form>

    <!-- 操作区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="default" @click="handleCloseUpdataChildMsgDialog">取消</el-button>
        <el-button type="primary" @click="handleUpdateChildMsg(updateChildMsgRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 新增任务弹窗 -->
  <el-dialog class="dialog-container" style="
        max-height: 700px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        flex-wrap: nowrap;
      " width="1300px" :close-on-click-modal="false" v-model="dialogAddAvgVisible" title="分配新增"
    @close="handleCloseAddDialog" @closed="handleCloseAddDialog">

    <!-- 研发负责人分配研发任务或运维任务 -->
    <div class="dialog-add-form" style="overflow-y: auto; max-height: 580px;"
      v-if="isUserAuthId == '555' || isUserAuthId == '888' || isUserAuthId == '999'">
      <div>
        <!-- 1、分配研发任务 -->
        <div class="dialog-form-title"
          style="display: flex; justify-content: space-between;background-color: white;padding: 10px;">
          <div>
            <b>分配研发任务：</b>
            <!-- <span style="color: red; font-size: 12px; font-weight: lighter;">(运维任务可以不选研发人员，直接确定，上线评审时可以选择运维参加!)</span> -->
          </div>
          <div>
            <el-button type="primary" size="small" @click="handleAddFormData(1)">
              添加
            </el-button>
          </div>
        </div>
        <el-form class="dialog-form-box"
          style="padding: 5px 10px; display: flex; flex-direction: row;flex-wrap: nowrap; justify-content: space-between;"
          :model="devsRequirementFormData" v-for="(item, index) in devsRequirementFormData" :key="index">
          <!-- 研发人员 -->
          <el-form-item prop="userUUID">
            <el-select v-model="item.userUUID" filterable placeholder="参与人员" style="width: 100px" clearable>
              <el-option v-for="test in allDevNameOptions" :key="test.uuid" :label="test.nickName" :value="test.uuid"
                :disabled="(isDisabled(test.uuid, item.userUUID, 1) || isInitDisabled(test.uuid, 1))" />
            </el-select>
          </el-form-item>
          <!-- 预计完成时间 -->
          <el-form-item prop="guessTime">
            <el-date-picker style="width: 140px" v-model="item.guessTime" type="date" placeholder="预计完成时间"
              :disabledDate="disabledDate" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
          </el-form-item>
          <!-- 描述工作内容 -->
          <el-form-item prop="processJob">
            <el-input style="width: 420px" placeholder="简述工作内容..." clearable v-model="item.processJob"></el-input>
          </el-form-item>
          <!-- 评估耗时 -->
          <el-form-item prop="guessProcess">
            耗时评估：
            <el-input-number style="width: 80px" v-model="item.guessProcess" :min="1" controls-position="right" />
            &nbsp;&nbsp;小时
          </el-form-item>
          <!-- 需求评分 -->
          <el-form-item prop="processJobNum">
            难度评分：
            <el-input-number style="width: 80px" v-model="item.processJobNum" :min="0" :max="500"
              controls-position="right" />
          </el-form-item>
          <!-- 新增/删除操作按钮 -->
          <el-form-item>
            <!-- <el-button type="primary" plain size="small" @click="handleAddFormData(1)"><el-icon :size="14">
                <Plus />
              </el-icon></el-button>
            <el-button type="danger" plain size="small" @click="handleDelFormData(index, 1)"><el-icon :size="14">
                <Minus />
              </el-icon></el-button> -->
            <el-button style="margin-top: 5px;" type="danger" :icon="Delete" size="small"
              @click="handleDelFormData(index, 1)" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 2、分配运维任务 -->
      <div>
        <div class="dialog-form-title"
          style="display: flex; justify-content: space-between;background-color: white;padding: 10px;">
          <div>
            <b>分配运维任务：</b>
          </div>
          <div>
            <el-button type="primary" size="small" @click="handleAddFormData(2)">
              添加
            </el-button>
          </div>
        </div>
        <el-form class="dialog-form-box"
          style="padding: 5px 10px; display: flex; flex-direction: row;flex-wrap: nowrap; justify-content: space-between;"
          :model="msRequirementFormData" v-for="(item, index) in msRequirementFormData" :key="index">
          <!-- 运维人员 -->
          <el-form-item prop="userUUID">
            <el-select v-model="item.userUUID" filterable placeholder="参与人员" style="width: 100px" clearable>
              <el-option v-for="test in allMsNameOptions" :key="test.uuid" :label="test.nickName" :value="test.uuid"
                :disabled="isDisabled(test.uuid, item.userUUID, 2) || isInitDisabled(test.uuid, 2)" />
            </el-select>
          </el-form-item>
          <!-- 预计完成时间 -->
          <el-form-item prop="guessTime">
            <el-date-picker style="width: 140px" v-model="item.guessTime" type="date" placeholder="预计完成时间"
              :disabledDate="disabledDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item>
          <!-- 描述工作内容 -->
          <el-form-item prop="processJob">
            <el-input style="width: 420px" placeholder="简述工作内容..." clearable v-model="item.processJob"></el-input>
          </el-form-item>
          <!-- 评估耗时 -->
          <el-form-item prop="guessProcess">
            预计耗时：
            <el-input-number style="width: 80px" v-model="item.guessProcess" :min="1" controls-position="right" />
            &nbsp;&nbsp;小时
          </el-form-item>
          <!-- 需求评分 -->
          <el-form-item prop="processJobNum">
            任务难度评分：
            <el-input-number style="width: 80px" v-model="item.processJobNum" :min="0" :max="500"
              controls-position="right" />
          </el-form-item>
          <!-- 新增/删除操作按钮 -->
          <el-form-item>
            <el-button style="margin-top: 5px;" type="danger" :icon="Delete" size="small"
              @click="handleDelFormData(index, 2)" />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 测试负责人分配测试人员 -->
    <div class="dialog-add-form" style="overflow-y: auto; max-height: 580px" v-if="isUserAuthId == '111'">
      <!-- 分配测试人员 -->
      <div class="dialog-form-title"
        style="display: flex; justify-content: space-between;background-color: white;padding: 10px;">
        <div>
          <b>分配测试任务：</b>
        </div>
        <div>
          <el-button type="primary" size="small" @click="handleAddFormData(3)">
            添加
          </el-button>
        </div>
      </div>
      <el-form class="dialog-form-box"
        style="padding: 5px 10px; display: flex; flex-direction: row;flex-wrap: nowrap; justify-content: space-between;"
        :model="tsRequirementFormData" v-for="(item, index) in tsRequirementFormData" :key="index">
        <!-- 测试人员 -->
        <el-form-item prop="userUUID">
          <el-select v-model="item.userUUID" filterable placeholder="参与人员" style="width: 100px" clearable>
            <el-option v-for="test in allTestNameOptions" :key="test.uuid" :label="test.nickName" :value="test.uuid"
              :disabled="(isDisabled(test.uuid, item.userUUID, 3) || isInitDisabled(test.uuid, 3))" />
          </el-select>
        </el-form-item>
        <!-- 预计完成时间 -->
        <el-form-item prop="guessTime">
          <el-date-picker style="width: 140px" v-model="item.guessTime" type="date" placeholder="预计完成时间"
            :disabledDate="disabledDate" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <!-- 描述工作内容 -->
        <el-form-item prop="processJob">
          <el-input style="width: 420px" placeholder="简述工作内容..." clearable v-model="item.processJob"></el-input>
        </el-form-item>
        <!-- 评估耗时 -->
        <el-form-item prop="guessProcess">
          耗时评估：
          <el-input-number style="width: 80px" v-model="item.guessProcess" :min="1" controls-position="right" />
          &nbsp;&nbsp;小时
        </el-form-item>
        <!-- 需求评分 -->
        <el-form-item prop="processJobNum">
          难度评分：
          <el-input-number style="width: 80px" v-model="item.processJobNum" :min="0" :max="500"
            controls-position="right" />
        </el-form-item>
        <!-- 新增/删除测试操作按钮 -->
        <el-form-item>
          <!-- <el-button type="primary" plain size="small" @click="handleAddFormData(3)"><el-icon :size="14">
              <Plus />
            </el-icon></el-button>
          <el-button type="danger" plain size="small" @click="handleDelFormData(index, 3)"><el-icon :size="14">
              <Minus />
            </el-icon></el-button> -->
          <el-button style="margin-top: 5px;" type="danger" :icon="Delete" size="small"
            @click="handleDelFormData(index, 3)" />
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="default" @click="handleCloseAddDialog">取消</el-button>
        <el-button type="primary" @click="handleConfirmAddAvg">确定</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 任务超时原因弹窗 -->
  <el-dialog :close-on-click-modal="false" v-model="dialogOutTimeMsgVisible"
    :title="isOutTimeMsgType ? '填写超时原因' : '查看超时原因'" @close="handleCloseOutTimeMsgDialog"
    @closed="handleCloseOutTimeMsgDialog">
    <el-form class="dialog-form-box" :model="isChildOutTimeMsg" ref="outTimeMsgRef" :rules="outTimeMsgRules">
      <el-form-item label="是否超时：" label-width="100px" v-if="!isOutTimeMsgType">
        <el-text :style="{ color: isChildOutTimeMsg.isOutTime == '否' ? 'green' : 'red' }"> {{
          isChildOutTimeMsg.isOutTime
            ==
            '否' ? "未超时" : "已超时" }}</el-text>
      </el-form-item>
      <el-form-item label="超时确认人：" label-width="100px" v-if="!isOutTimeMsgType">
        <el-text> {{ isChildOutTimeMsg.IsOutTimeEnterPersion }}</el-text>
      </el-form-item>
      <el-form-item label="超时负责人：" label-width="100px" v-if="!isOutTimeMsgType">
        <el-text> {{ isChildOutTimeMsg.IsOutTimePersion }}</el-text>
      </el-form-item>
      <!-- 超时原因 -->
      <el-form-item prop="IsOutTimeMsg" label="超时原因：" label-width="100px">
        <el-input :autosize="{ minRows: 8, maxRows: 100 }" placeholder="请输入超时原因" show-word-limit type="textarea"
          v-model="isChildOutTimeMsg.IsOutTimeMsg" />
      </el-form-item>
      <!-- 操作区域 -->
      <el-form-item v-if="isOutTimeMsgType">
        <div class="dialog-footer" style="width: 100%; text-align: right;">
          <el-button type="default" @click="handleCloseOutTimeMsgDialog">取消</el-button>
          <el-button type="primary" @click="handleSubmitOutTimeMsg(outTimeMsgRef)">确定</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 修改文件弹窗 -->
  <el-dialog v-if="dialogEditFileVisible" style="width: 1200px;max-height: 700px;overflow-y: auto;" title="修改"
    :close-on-click-modal="false" v-model="dialogEditFileVisible">
    <EditRequirementFileVue :isRequirementID="isID" :isEditFileType="isEditFileType" :filesList="filesList"
      :isChildId="isChildId" @edit-file="handleEditFileResult"></EditRequirementFileVue>
  </el-dialog>

  <!-- 查看大图 -->
  <div class="page-shade" v-if="isShowBigImg">
    <div class="img-big" @click="isShowBigImg = false" @mousewheel="mousewheel">
      <img :src="curPhoto.url" alt="大图" @click="isShowBigImg = false" :style="{
        transform: `rotate(${curPhoto.rotate}deg) scale(${curPhoto.scale})`,
        width: `${curPhoto.w}px`
      }" />
    </div>
  </div>

  <!-- 预览文件 -->
  <!-- <div>
    <PreviewDocumentVue :file-url="selectFile" :file-name="handleFileName(selectFile).fileName"></PreviewDocumentVue>
  </div> -->

</template>

<script setup lang="ts">
import TestRequirementCaseVue from "./testRequirementCase.vue";
import ItemProjectCasesVue from "./itemProjectCases.vue";
import EditRequirementFileVue from "./editRequirementFile.vue";
import EditorMsgVue from "@/components/requirement/editorMsg.vue";
import useCommonDataStore from "@/store/common/common";
import useQuickCreateStore from "@/store/common/clipboar";
import { useRouter } from "vue-router";
import {
  ref,
  reactive,
  defineProps,
  watch,
  onMounted,
} from "vue";
import {
  PostRequirement, GetUpdateMySubmitByRequirementStatus, PostAvgDeleteRequirement,
  PostAddSaidContents, GetSaidContentList, GetOperationHistorys, PostRequriementPullBranch,
  PutUpdateChildMsg, getNewFatherRequirementStatus, GetOutTimeRequirementMsg,
  PostOutTimeRequirementMsg, GetDeleteSubmitTestPersion, PostAddSubmitTestRequirement, GetJoinTests,
  PostUpdateRequirementMsg, postAddAvgRequirement,
} from "@/api/newDemands/index";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { Delete } from '@element-plus/icons-vue'
import useUserStore from "@/store/modules/user";
import {
  enterStatus, fatherStatus, handleFileName, handleDownloadFile, testStatus, tableTimeDateMsg2,
  isGetTestStatus, handleFileNameList, disabledDate, isValidateString, timeToData, validateInput, validateNumber, handleFilesNames,
  taskTypeContent, handleStringNames,
  isTsContent, openPreviewInNewWindow,
} from "@/utils/utils";


const props = defineProps({
  isRequirementID: {
    type: Number,
    required: true,
  },
  clearData: {
    type: Boolean,
    required: true,
  },
  isComment: {
    type: Boolean,
    required: false,
  }
});

let userInfoStore = useUserStore();
const loading = ref(false);
const loadingMsg = ref(false);
const loadingPullBranch = ref(false);
let useCommonStore = useCommonDataStore();
const userName = ref<any>("");// 当前用户
const isID = ref<any>(props.isRequirementID);
const isComment = ref<any>(props.isComment);//是否显示留言输入框
const requirementData = ref<any>(null); //该需求所有数据
const draftFiles = ref<any>([]); //该需求所有的需求草稿地址
const summaryFiles = ref<any>([]); //该需求所有的需求概要设计文件
const baseUrl = ref(""); //服务器地址
const tableData = ref<any>([]); // 任务列表
const tableDevsData = ref<any>([]);
const tableMsData = ref<any>([]);
const tableTsData = ref<any>([]);
const router = useRouter();
const quickCreateStore = useQuickCreateStore();


const deleteRequirementForm = ref<any>({
  itemRequirementId: null,
  devs: [],
  ts: []
});// 删除分配人员提交数据
const isUserAuthId = ref<any>();//当前用户
const addSaidContents = ref<any>({
  requirementId: isID.value,
  saidContent: ""
});// 提交留言数据
const msgOptions = ref(["历史留言", "变更历史"]);// 展示内容切换
const defaultMsg = ref("历史留言");// 默认展示内容
const commentsData = ref<any>([]);// 所有历史留言
const commentsHistorysData = ref<any>([]);// 所有变更记录
const dialogPullBranchVisible = ref(false);// 控制查看提测记录的弹窗
const pullBranchList = ref<any>([]);// 提测记录数据

// TODO 修改任务
const dialogUpdateChildMsgVisible = ref(false);// 修改任务弹窗
const isUpdateChildMsg = ref<any>(null);// 当前待修改任务数据
const updateChildMsgRef = ref<FormInstance>();// 修改任务表单实例
const allRoleOptions = ref<any>();// 所有角色
const updateChildMsgRules = reactive({
  userUUID: [{ required: true, message: '必选', trigger: 'blur' }],
  guessTime: [{ required: true, message: '必选', trigger: 'blur' }],
  processJob: [{ required: true, message: '必填', trigger: 'blur' }, { validator: validateInput, trigger: 'blur' }],
  guessProcess: [{ required: true, message: '必填', trigger: 'blur' }, { validator: validateNumber, trigger: 'blur' }],
  processJobNum: [{ required: true, message: '必填', trigger: 'blur' }, { validator: validateNumber, trigger: 'blur' }],
});// 修改任务表单校验
const updateChildMsgForm = ref({
  childId: null,
  userUUID: "",
  guessTime: "",
  processJob: "",
  guessProcess: null,
  processJobNum: null
});// 修改任务表单提交内容

const dialogAddAvgVisible = ref(false);// 控制新增任务弹窗
const allDevNameOptions = ref(); //所有研发人员列表
const allMsNameOptions = ref(); //所有运维人员列表
const allTestNameOptions = ref(); //所有测试人员列表
const allDevsRequirementUsers = ref<any>([]);// 已分配任务人员
const devsRequirementFormData = reactive<any>([
  // {
  //   userUUID: "",
  //   guessTime: "",
  //   processJob: "",
  //   guessProcess: null,
  //   processJobNum: null,
  // }
]); // 已选中研发人员列表
const msRequirementFormData = reactive<any>([
  // {
  //   userUUID: "",
  //   guessTime: "",
  //   processJob: "",
  //   guessProcess: null,
  //   processJobNum: null,
  // }
]); // 已选中运维人员列表
const tsRequirementFormData = reactive<any>([
  // {
  //   userUUID: "",
  //   guessTime: "",
  //   processJob: "",
  //   guessProcess: null,
  //   processJobNum: null,
  // }
]); // 已选中测试人员列表

const dialogOutTimeMsgVisible = ref(false);// 超时原因弹窗
const isChildId = ref(null);// 当前任务id
const isOutTimeMsgType = ref(false);// false: 查看，true：填写
const loadingOuttimeMsg = ref(false);
const isChildOutTimeMsg = ref<any>({
  IsOutTime: "",
  IsOutTimeEnterPersion: "",
  IsOutTimeMsg: "",
  IsOutTimePersion: ""
});// 当前任务状态
const outTimeMsgRef = ref<FormInstance>();
const outTimeMsgRules = reactive({
  IsOutTimeMsg: [
    {
      required: true,
      message: "必填",
      trigger: "blur",
      validator: (_rule: any, value: any, callback: any) => {
        if (isValidateString(value)) {
          callback(new Error("必填，且不能为空格或空行！"));
        } else {
          callback();
        }
      },
    },
  ]
});


// 是否显示大图
const isShowBigImg = ref(false);
// 当前大图的信息
const curPhoto = ref({
  url: "", //照片地址
  name: "", //照片名称
  rotate: 0, //旋转角度
  scale: 1, //缩放比例
  w: 0, //照片宽度
  h: 0, // 照片高度
});
// 显示大图
const showImg = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  if (target.tagName === 'IMG') {
    const targetImage = target as HTMLImageElement;
    curPhoto.value.url = targetImage.src;
    curPhoto.value.rotate = 0;
    curPhoto.value.scale = 1;
    // 确保图片加载完成
    const img = new Image();
    img.onload = () => {
      curPhoto.value.w = img.width; // 使用图片的原始宽度
      curPhoto.value.h = img.height; // 使用图片的原始高度
      isShowBigImg.value = true;
    };
    img.src = targetImage.src;
  }
};
// 鼠标滚动事件
const mousewheel = (e: WheelEvent) => {
  e.preventDefault(); // 阻止默认行为
  const isZoomingIn = e.deltaY < 0; // deltaY < 0 表示向上滚动（放大）
  const zoomStep = 0.1; // 每次滚动的缩放步长
  if (isZoomingIn) {
    // 放大
    if (curPhoto.value.scale < 2) { // 最大缩放比例限制
      curPhoto.value.scale += zoomStep;
    }
  } else {
    // 缩小
    if (curPhoto.value.scale > 0.3) { // 最小缩放比例限制
      curPhoto.value.scale -= zoomStep;
    }
  }
  // 确保缩放比例在合理范围内
  curPhoto.value.scale = Math.max(0.3, Math.min(2, curPhoto.value.scale));
};

// TODO 修改需求详情
const dialogEditorRequirementMsgVisible = ref(false);// 控制修改需求详情弹窗
const requirementContent = ref("");


// TODO 查看测试用例
const dialogTestCaseVisible = ref(false);// 控制开启上传测试用例弹窗
const testCaseSearch = ref<any>({
  itemItemId: null,
  childId: null,
  isUploadCase: null,
  fatherId: null
}); // 测试用例组件传参

// TODO 查看项目用例
const dialogProjectCaseVisible = ref(false);// 控制查看项目用例弹窗
const dialogEditorTestCaseVisible = ref(false);// 控制上传测试用例弹窗

// TODO 修改文件
const dialogEditFileVisible = ref(false);// 控制修改文件弹窗
const isEditFileType = ref();// 待修改的文件类型
const filesList = ref<any>([]);// 待修改的原文件

// TODO 新增提测人员
const dialogAddSubmitTestVisible = ref(false);// 控制新增提测人员弹窗
const testOptions = ref<any>([]);// 可新增提测人员列表
const addTestForm = ref<any>({
  childId: null,
  ts: [
    // {
    //   userName: '',
    //   uuid: ""
    // }
  ],
  pullBranch1: "",
  pullBranch2: "",
  submitTest: ""
});// 新增提测人员提交表单





watch(
  () => props.clearData,
  (newClearData) => {
    if (newClearData) {
      requirementData.value = null;
      isID.value = null;
      commentsData.value = [];
      commentsHistorysData.value = [];
      isComment.value = true;
    }
  }
);

watch(
  () => props.isRequirementID,
  async (newIsId) => {
    isID.value = newIsId;
    requirementData.value = null;
    draftFiles.value = [];
    summaryFiles.value = [];
    isComment.value = true;
    await getRequirementData();
  }
);


// TODO 查询一个需求
const getRequirementData = async () => {
  isUserAuthId.value = localStorage.getItem("authorityId");
  userName.value = userInfoStore.$state.userInfo.nickName;

  loading.value = true;
  const { data } = await PostRequirement({
    id: isID.value,
  });

  if (data.code === 200) {
    requirementData.value = data.data;
    await handleGetSaidContentList(isID.value);

    // 已分配研发/测试任务数据处理
    if (data.data.itemRequirementChilds.length !== 0) {
      tableData.value = data.data.itemRequirementChilds;

      tableDevsData.value = tableData.value.filter((item: any) => item.isTs == 1);
      tableMsData.value = tableData.value.filter((item: any) => item.isTs == 2);
      tableTsData.value = tableData.value.filter((item: any) => item.isTs == 3);
    }

    // 需求草稿地址
    if (
      data.data.itemRequirementWorldDraft !== "" ||
      data.data.itemRequirementWorldDraft.includes("|")
    ) {
      if (data.data.itemRequirementWorldDraft.includes("|")) {
        draftFiles.value = data.data.itemRequirementWorldDraft
          .split("|")
          .map((url: string) => {
            return handleFileName(url);
          });
      } else {
        draftFiles.value[0] = handleFileName(
          data.data.itemRequirementWorldDraft
        );
      }
    };

    // 需求概要设计地址
    if (
      data.data.itemRequirementWorldSummary !== "" ||
      data.data.itemRequirementWorldSummary.includes("|")
    ) {
      if (data.data.itemRequirementWorldSummary.includes("|")) {
        summaryFiles.value = data.data.itemRequirementWorldSummary
          .split("|")
          .map((url: string) => {
            return handleFileName(url);
          });
      } else {
        summaryFiles.value[0] = handleFileName(
          data.data.itemRequirementWorldSummary
        );
      }
    };
    loading.value = false;

  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    throw console.error(data.msg);
  }
};


// TODO 关闭/取消修改需求弹窗
const handleCloseEditorMsg = () => {
  requirementContent.value = "";
  dialogEditorRequirementMsgVisible.value = false;
};

// 富文本数据更新
const updateMsg = (newValue: any) => {
  requirementContent.value = newValue;
  return requirementContent.value;
};

// TODO 开启修改需求详情弹窗
const handleOpenEditorRequriementMsg = () => {
  requirementContent.value = requirementData.value.requirementContent;
  dialogEditorRequirementMsgVisible.value = true;
};

// TODO 确定修改需求详情
const handleUpdateEditorMsg = async () => {

  const { data } = await PostUpdateRequirementMsg({
    requirementId: isID.value,
    requirementContent: requirementContent.value
  });
  if (data.code === 200) {
    handleCloseEditorMsg();
    await getRequirementData();
  } else {
    handleCloseEditorMsg();
    ElMessage.error(data.msg);
    return;
  }
};



// TODO 待测试-测试中
const hanldeUpdateTestStatus = async (id: number) => {
  const { data } = await GetUpdateMySubmitByRequirementStatus(id);
  if (data.code === 200) {
    await getRequirementData();
    return;
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
};

// TODO 关闭分配弹窗
const handleCloseAddDialog = () => {
  devsRequirementFormData.length = 0;

  msRequirementFormData.length = 0;

  tsRequirementFormData.length = 0;
  allDevsRequirementUsers.value = [];
  dialogAddAvgVisible.value = false;
};

// TODO 新增分配人员行
const handleAddFormData = (val: any) => {
  if (val === 1) {
    devsRequirementFormData.push({
      userUUID: "",
      guessTime: "",
      processJob: "",
      guessProcess: null,
      processJobNum: null,
    });
  };

  if (val === 2) {
    msRequirementFormData.push({
      userUUID: "",
      guessTime: "",
      processJob: "",
      guessProcess: null,
      processJobNum: null,
    });
  };

  if (val === 3) {
    tsRequirementFormData.push({
      userUUID: "",
      guessTime: "",
      processJob: "",
      guessProcess: null,
      processJobNum: null,
    });
  }
};
// TODO 删除分配人员行
const handleDelFormData = (index: number, del: number) => {
  switch (del) {
    // 分配前删除研发人员
    case 1:
      devsRequirementFormData.splice(index, 1);
      return devsRequirementFormData;
    // };
    // 分配前删除测试人员
    case 2:
      msRequirementFormData.splice(index, 1);
      return msRequirementFormData;
    // };
    // 分配前删除测试人员
    case 3:
      tsRequirementFormData.splice(index, 1);
      return tsRequirementFormData;
    // }
  }
};

// TODO　开启新增需求任务弹窗
const handleOpenAddAvgDialog = async () => {
  allDevsRequirementUsers.value = requirementData.value.itemRequirementChilds?.map((item: any) => ({
    userName: item.userName,
    userUUID: item.userUUID,
    isTs: item.isTs,
  }));
  // 如果用户为研发负责人
  if (isUserAuthId.value !== "111") {
    await useCommonStore.getAllRoleUsersList("111|222|555|666|777|999");
    allDevNameOptions.value = useCommonStore.$state.allRoleUserList;
    allMsNameOptions.value = useCommonStore.$state.allRoleUserList;
    tsRequirementFormData.length = 0;
  } else {
    // 如果用户为测试负责人
    await useCommonStore.getAllRoleUsersList("111|222|555|666|777|999");
    allTestNameOptions.value = useCommonStore.$state.allRoleUserList;
    devsRequirementFormData.length = 0;
    msRequirementFormData.length = 0;
  }
  dialogAddAvgVisible.value = true;
};

// 初始时给已分配的人员添加禁选
const isInitDisabled = (val: any, isTs: any) => {
  return allDevsRequirementUsers.value.some((item: any) => (item.userUUID === val && item.isTs == isTs));
};

// 分配人员动态添加禁选功能
const isDisabled = (testUuid: any, selectedUuid: any, val: number) => {
  if (val === 1) {
    // 检查当前测试人员UUID是否已经在devsRequirementFormData中被选中
    return devsRequirementFormData.some(
      (formItem: any) =>
        formItem.userUUID === testUuid && formItem.userUUID !== selectedUuid
    );
  } else if (val == 2) {
    return msRequirementFormData.some(
      (formItem: any) =>
        formItem.userUUID === testUuid && formItem.userUUID !== selectedUuid
    );
  } else if (val == 3) {
    // 分配测试人员动态添加禁选功能
    // 检查当前测试人员UUID是否已经在tsRequirementFormData中被选中
    return tsRequirementFormData.some(
      (formItem: any) =>
        formItem.userUUID === testUuid && formItem.userUUID !== selectedUuid
    );
  }
};


// TODO 刷新fatherStatus
const updateFatherStatus = async (id: number) => {
  const { data } = await getNewFatherRequirementStatus({
    requirementId: id,
  });

  if (data.code !== 200) {
    ElMessage.error(data.msg);
    return;
  }
};

// TODO 提交分配任务功能
const handleConfirmAddAvg = async () => {

  let postFormData = {
    itemRequirementId: isID.value,
    endTime: null,
    devs: devsRequirementFormData,
    ms: msRequirementFormData,
    ts: tsRequirementFormData,
  };

  // 1、发起分配需求请求
  const { data } = await postAddAvgRequirement(postFormData);
  if (data.code === 200) {
    // 2、请求成功后关闭弹窗并重新获取任务数据
    dialogAddAvgVisible.value = false;

    loading.value = true;
    await updateFatherStatus(isID.value);
    await getRequirementData();
    loading.value = false;
  } else {
    ElMessage.error(data.msg);
    dialogAddAvgVisible.value = false;
    throw console.error(data.msg);
  }
};

// TODO 开启修改已分配任务弹窗
const handleChangeChildUser = async (val: any) => {
  if (localStorage.getItem("userUUID") != val.avgUserUUID) {
    ElMessage.error("无权限操作他人任务！");
    return;
  }
  isUpdateChildMsg.value = val;
  await useCommonStore.getAllRoleUsersList("111|222|555|666|777|999");
  allRoleOptions.value = useCommonStore.$state.allRoleUserList;
  updateChildMsgForm.value = {
    childId: val.ID,
    userUUID: val.userUUID,
    guessTime: val.guessTime,
    processJob: val.processJob,
    guessProcess: val.guessProcess,
    processJobNum: val.processJobNum
  }
  dialogUpdateChildMsgVisible.value = true;
};

// TODO 取消修改任务
const handleCloseUpdataChildMsgDialog = () => {
  isUpdateChildMsg.value = null;
  updateChildMsgForm.value = {
    childId: null,
    userUUID: "",
    guessTime: "",
    processJob: "",
    guessProcess: null,
    processJobNum: null
  };
  updateChildMsgRef.value?.resetFields();
  dialogUpdateChildMsgVisible.value = false;
};

// TODO 确定修改任务
const handleUpdateChildMsg = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const { data } = await PutUpdateChildMsg(updateChildMsgForm.value);
      if (data.code === 200) {
        handleCloseUpdataChildMsgDialog();

        loading.value = true;
        await getRequirementData();
        loading.value = false;
        dialogUpdateChildMsgVisible.value = false;
        ElMessage.success(data.msg);
        return;
      } else {
        ElMessage.error(data.msg);
        throw console.error(data.msg);
      }
    } else {
      throw console.error(fields);
    }
  })
};


// TODO 删除已分配人员
const handleDelChildUser = async (val: any) => {
  await ElMessageBox.confirm(`确认删除${val.userName}吗？`, "操作", {
    type: "warning",
    cancelButtonText: "取消",
    confirmButtonText: "确定",
    closeOnClickModal: false,
    closeOnPressEscape: false,
  }).then(async () => {
    if (val.isTs == 1) {
      deleteRequirementForm.value = {
        itemRequirementId: val.itemRequirementId,
        devs: [{
          userUUID: val.userUUID,
          userName: val.userName
        }],
        ts: []
      }
    } else {
      deleteRequirementForm.value = {
        itemRequirementId: val.itemRequirementId,
        devs: [],
        ts: [{
          userUUID: val.userUUID,
          userName: val.userName
        }]
      }
    };

    const { data } = await PostAvgDeleteRequirement(deleteRequirementForm.value);
    if (data.code === 200) {
      await updateFatherStatus(isID.value);
      await getRequirementData();
      ElMessage.success(data.msg);
      deleteRequirementForm.value = {
        itemRequirementId: null,
        devs: [],
        ts: []
      };
      return;
    } else {
      ElMessage.error(data.msg);
      return;
    }
  }).catch(() => {
    deleteRequirementForm.value = {
      itemRequirementId: null,
      devs: [],
      ts: []
    };
    return;
  })
};

// TODO 获取所有留言
const handleGetSaidContentList = async (id: number) => {
  const { data } = await GetSaidContentList(id);
  if (data.code === 200) {
    commentsData.value = data.data;
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
};

// TODO 获取所有变更记录
const handleGetHistorysList = async (id: number) => {
  const { data } = await GetOperationHistorys(id);
  if (data.code === 200) {
    commentsHistorysData.value = data.data;
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
};

// TODO 提交留言
const handleAddSaidContents = async () => {
  if (addSaidContents.value.saidContent.trim() == '') {
    ElMessage.warning("留言不能为空或空格！");
    return;
  };

  const { data } = await PostAddSaidContents(addSaidContents.value);
  if (data.code === 200) {
    ElMessage.success(data.msg);
    addSaidContents.value = {
      requirementId: isID.value,
      saidContent: ""
    };
    await handleGetSaidContentList(isID.value);
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
};

// TODO 分段控制器切换
const handleChangeMsg = async (val: any) => {
  if (val == '历史留言') {
    loadingMsg.value = true;
    await handleGetSaidContentList(isID.value);
    loadingMsg.value = false;
    return;
  };

  if (val == '变更历史') {
    loadingMsg.value = true;
    await handleGetHistorysList(isID.value);
    loadingMsg.value = false;
    return;
  }
};


// 检查是否提测的方法
function itemExistsInArray(item: any, array: any) {
  return array.some((a: any) => a.userName === item.userName && a.uuid === item.uuid);
};

// TODO 开启新增提测人员弹窗
const handleAddPullBranch = async (val: any) => {
  const testList = val.itemRequirementBranchTests.map((item: any) => {
    return {
      userName: item.testName,
      uuid: item.testUUID
    }
  });

  const { data } = await GetJoinTests(isID.value);

  if (data.code === 200) {
    testOptions.value = data.data.map((item: any) => {
      return {
        userName: item.nickName,
        uuid: item.uuid,
      };
    });

    testOptions.value.forEach((item: any) => {
      item.disabled = itemExistsInArray(item, testList) ? true : false;
    });

    addTestForm.value.childId = val.ID;

    dialogAddSubmitTestVisible.value = true;
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
};

// TODO 关闭/取消新增提测人员弹窗
const handleColseAddTest = () => {
  testOptions.value = [];
  addTestForm.value.ts = [];
  dialogAddSubmitTestVisible.value = false;
};

// TODO 确认提交新增提测人员
const handleAddSubmitTest = async () => {
  if (addTestForm.value.ts.length > 0) {

    const ts = addTestForm.value.ts.map((item: any) => {
      const option = testOptions.value.find((option: any) => option.uuid == item);
      if (option) {
        return { uuid: item, userName: option.userName };
      };

      return item;
    });
    addTestForm.value.ts = ts;

    const { data } = await PostAddSubmitTestRequirement(addTestForm.value);
    if (data.code === 200) {
      handleColseAddTest();
      await getRequirementData();
    } else {
      ElMessage.error(data.msg);
      handleColseAddTest();
    };
  } else {
    ElMessage.warning("请选择新增提测人员！");
    return;
  }
};


// TODO 获取提测记录
const handleViewPullBranch = async (val: any) => {
  dialogPullBranchVisible.value = true;

  loadingPullBranch.value = true;
  const { data } = await PostRequriementPullBranch({
    childId: val.ID,
    userName: val.userName
  });


  if (data.code === 200) {
    pullBranchList.value = data.data;
    loadingPullBranch.value = false;
  } else {
    ElMessage.error(data.msg);
    dialogPullBranchVisible.value = false;
    loadingPullBranch.value = false;
    return;
  }
};

// TODO 关闭超时原因弹窗
const handleCloseOutTimeMsgDialog = () => {
  isChildOutTimeMsg.value = {
    IsOutTime: "",
    IsOutTimeEnterPersion: "",
    IsOutTimeMsg: "",
    IsOutTimePersion: ""
  };
  outTimeMsgRef.value?.resetFields();
  isChildId.value = null;
  isOutTimeMsgType.value = false;
  dialogOutTimeMsgVisible.value = false;
};

// TODO 开启查看或提交超时原因弹窗
const handleOpenChildOutTime = async (val: any) => {
  if (val.isOutTimeMsg !== '') {
    isOutTimeMsgType.value = false;
    loadingOuttimeMsg.value = true;
    await handleChildOutTimeMsg(val.ID);
    loading.value = false;
  } else {
    isOutTimeMsgType.value = true;
  }
  isChildId.value = val.ID;
  dialogOutTimeMsgVisible.value = true;
};

// TODO 获取任务超时状态
const handleChildOutTimeMsg = async (id: number) => {
  try {
    const { data } = await GetOutTimeRequirementMsg(id);
    if (data.code === 200) {
      isChildOutTimeMsg.value = data.data;
      return isChildOutTimeMsg.value;
    } else {
      ElMessage.error(data.msg);
      return isChildOutTimeMsg.value;
    }
  } catch (error) {
    ElMessage.error("获取超时状态失败");
    return isChildOutTimeMsg.value;
  }
};

// TODO 提交超时原因
const handleSubmitOutTimeMsg = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const { data } = await PostOutTimeRequirementMsg({
        requirementChildId: isChildId.value,
        isOutTimeMsg: isChildOutTimeMsg.value.IsOutTimeMsg
      });
      if (data.code === 200) {
        loading.value = true;
        handleCloseOutTimeMsgDialog();
        await getRequirementData();
        loading.value = false;
      } else {
        ElMessage.error(data.msg);
        throw console.error(data.msg);
      }

    } else {
      throw console.error(fields);
    }
  })
};

// TODO 开启上传/查看测试用例弹窗
const handleOpenCaseDialog = (val: any) => {
  testCaseSearch.value = {
    itemItemId: val.itemItemId,
    childId: val.ID,
    isUploadCase: null,
    fatherId: val.itemRequirementId
  };
  dialogTestCaseVisible.value = true;
};

// TODO 开启上传用例弹窗
const handleEditorCaseDialog = (val: any) => {
  testCaseSearch.value = {
    itemItemId: val.itemItemId,
    childId: val.ID,
    isUploadCase: val.isUploadCase,
    fatherId: val.itemRequirementId
  };
  dialogEditorTestCaseVisible.value = true;
};

// TODO 导入测试用例监听
const handleAddSuccess = async (success: boolean) => {
  if (success) {
    dialogEditorTestCaseVisible.value = false;
    // dialogTestResultVisible.value = true;
    loading.value = true;
    await updateFatherStatus(isID.value);
    await getRequirementData();
    loading.value = false;
  } else {
    dialogEditorTestCaseVisible.value = false;
    return;
  }
};

// TODO 开启查看项目用例弹窗
const handleOpenProjectCaseDialog = () => {
  dialogProjectCaseVisible.value = true;
};

// TODO 删除任务提测人员
const handleDeletSubmitPersion = async (val: any) => {
  ElMessageBox.confirm(
    `确认删除${val.testName}吗？`,
    'Warning',
    {
      cancelButtonText: '取消',
      confirmButtonText: '确定',
      type: 'warning',
      closeOnClickModal: false,
    }
  )
    .then(async () => {
      const { data } = await GetDeleteSubmitTestPersion(val.ID);
      if (data.code === 200) {
        ElMessage.success(data.msg);
        await getRequirementData();
      } else {
        ElMessage.error(data.msg);
        throw console.error(data.msg);
      }
    })
    .catch((error) => {
      throw console.error(error);
    })
};

// TODO 开启修改文件弹窗
const handleOpenEditFile = (val: any, files: any, childId: any) => {
  isEditFileType.value = val;
  filesList.value = files;
  isChildId.value = childId;
  dialogEditFileVisible.value = true;
};

// TODO 修改文件后的事件
const handleEditFileResult = async (result: any) => {
  dialogEditFileVisible.value = false;
  await getRequirementData();
};


// TODO 预览文件
const handlePreviewDocument = (url: string) => {
  let file = handleFileName(url);
  if (file.url.includes('Img') || file.url.includes('.pdf') || file.url.includes('.txt') || file.url.includes('.png') || file.url.includes('.gif') || file.url.includes('.jpge')) {
    window.open(`${'http://192.168.0.91:19081' + url}`, '_blank');
    return;
  } else {
    openPreviewInNewWindow(url, file.fileName);
  }
};


// TODO 快速创建需求
const handleClipboardRequirement = () => {
  const clipboarData = {
    projectId: requirementData.value.itemItemId,
    projectType: requirementData.value.itemRequirementTypeId,
    taskType: requirementData.value.taskType,
    projectTitle: requirementData.value.requirementName.replace(/^[^】]*】[^】]*】/, ''),
    itemRequirementBossNameUUID: requirementData.value.requirementAuditUUID,
    onlineTime: requirementData.value.onlineTime,
    projectMsg: requirementData.value.requirementContent,
    filePaths: []
  };

  quickCreateStore.setQuickCreateData(clipboarData);
  router.push('/requirement/create');
};

onMounted(async () => {
  await getRequirementData();
});
</script>
<style lang="scss" scoped>
.info-container {
  width: 100%;
  display: flex;
  flex-direction: column;

  // 需求详情区域
  .info-box {
    width: 100%;
    min-height: 200px;
    max-height: 550px;
    overflow-y: auto;
    margin-bottom: 10px;
    padding-right: 10px;

    .info-title {
      width: 100%;
      color: #000;
      //background-color: rgb(243.9, 244.2, 244.8);
      background-color: #fff;
      font-size: 1rem;
      font-family: Arial, Helvetica, sans-serif;
      padding: 10px;
      margin-bottom: 10px;
      font-weight: bold;
      //border-bottom: 1px solid rgb(177.3, 179.4, 183.6);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-radius: 6px;
      position: relative;

      // .info-status {
      //   min-width: 60px;
      //   max-width: 90px;
      // };
      .isJoin {
        position: absolute;
        right: 10px;
        top: 12px;
      }

      .info-title-text {
        min-width: calc(100% - 295px);
        display: inline-block;
        font-size: 1rem;
        text-align: center;
        margin-right: 110px;

        p {
          line-height: 25px;
        }
      }
    }

    .info-user {
      width: 100%;
      line-height: 1rem;
      color: #000;
      //background-color: rgb(243.9, 244.2, 244.8);
      background-color: #fff;
      border-radius: 6px;
      padding: 10px;
      display: flex;
      margin-bottom: 10px;
      flex-direction: row;

      .info-user-colum {
        width: 50%;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;

        .info-user-text-box {
          padding-right: 20px;
          padding-left: 20px;
        }

        .info-user-one {
          display: flex;
          justify-content: start;
          flex-direction: row;
        }

        p {
          padding: 5px 10px;
        }
      }
    }

    .info-user-title {
      color: #000;
      font-weight: bold;
    }

    // 需求简述
    .info-content-box-top {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .info-content-box-title {
        width: 100%;
        padding-left: 20px;
        color: #000;
        line-height: 30px;
        font-weight: bold;
        position: relative;
      }

      .el-button {
        margin-right: 5px;
      }
    }

    .info-content-box {
      width: calc(100% - 4px);
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      flex-direction: row;

      .el-card-content {
        width: calc(100% - 0px);
        // height: 200px;
        // min-height: 200px;
        max-height: 400px;
        overflow-y: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
      }
    }

    // 需求草稿
    .info-file-box {
      width: 100%;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      padding: 5px 20px;

      //background-color: rgb(243.9, 244.2, 244.8);
      .info-content-title {
        width: 70px;
        position: relative;
      }

    }

    ;

    .info-file-ul {
      width: calc(100% - 70px);
      text-align: left;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;


      .info-file-item {
        // width: 100px;
        // color: #2d8cf0;
        margin-right: 20px;
        cursor: pointer;
        font-weight: 500;
        //border-bottom: 1px solid #ccc;

        p {
          color: #999;
        }

        .info-file-icon {
          color: #2d8cf0;
          margin-left: 5px;
        }
      }
    }


    // 历史留言
    .card-comment-box {
      width: calc(100% - 4px);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .comment-title {
        padding-bottom: 10px;
      }

      // 记录
      .card-timeline-msg {
        width: 100%;
        padding: 10px;
        border-top: 1px solid var(--el-border-color);
      }
    }

    .title {
      font-weight: bolder;
    }

    .el-card-childs-title {
      padding-bottom: 10px;
    }

    .el-card-childs-ul {
      width: 100%;
      height: 100%;

      .el-card-childs-item {
        width: 100%;
        // min-height: 40px;
        padding: 5px 10px;
        // line-height: 40px;
        margin-bottom: 2px;
        display: flex;
        // flex-direction: column;
        justify-content: flex-start;
        flex-direction: row;
        font-size: 12px;
        background-color: rgb(243.9, 244.2, 244.8);
        // .el-card-child-one {
        //     width: 100%;
        //     display: flex;
        //     flex-direction: row;
        // }
        // .el-card-child-two {
        //     padding-top: 5px;
        // }

        .el-card-childs-item-name {
          width: 40px;
        }

        .el-card-childs-item-time {
          margin: 0 10px;
        }

        .el-card-childs-item-status {
          margin-left: 10px;
          margin-right: 10px;
          color: red;
        }
      }
    }

    // 任务表格
    .table-inline {
      width: 100%;
      padding-bottom: 10px;
      display: flex;
      justify-content: flex-start;
      position: relative;

      p {
        padding-right: 20px;
      }
    }
  }

  ;

  // 评论区域
  .comment-box {
    width: 100%;
    display: flex;
    flex-direction: row;

    .comment-input {
      margin-right: 10px;
    }
  }

  ;

  // TODO 任务列表：样式二
  .card-comment-test-out {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
  }


  // TODO 分配需求弹窗
  .dialog-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .dialog-form-title {
      width: 100%;
      font-weight: bold;
      padding: 10px;
      margin-bottom: 10px;
      background-color: white;
      display: flex;
      justify-content: space-between;
    }

    .dialog-form-box {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      // justify-content: flex-start;
      margin-bottom: 20px;

      .el-form-item {
        margin: 0 10px;
      }
    }

    .dialog-footer {
      width: 100%;
      text-align: right;
    }
  }
}

;

// TODO 提测人员
.add-test-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  padding: 20px 0 20px 60px;
}

;

.add-test-box-2 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  margin-bottom: 20px;

  .add-test-name {
    width: 80px;
  }
}

;

.add-test-box-3 {
  align-items: flex-start;
}

.footer-box {
  width: 100%;
  text-align: right;
}

.page-shade {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  overflow: hidden;
}

.img-big {
  padding: 20px;
  height: 100vh;
  overflow: auto;
  cursor: pointer;
  width: 100vw;
  display: flex;
  justify-content:center;
  align-items: center;
}

.img-big img {
  cursor: pointer;
  vertical-align: middle;
  max-width: 80%;
  max-height: 80%;
}
</style>
